<template>
  <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
    <n-grid-item>
      <n-form :label-width="80" :model="formValue" :rules="rules" ref="formRef">
        <n-form-item label="网站名称" path="siteName">
          <n-input v-model:value="formValue.siteName" placeholder="请输入网站名称" />
        </n-form-item>

        <n-form-item label="网站开启访问" path="systemOpen">
          <n-switch
            size="large"
            v-model:value="formValue.systemOpen"
            @update:value="systemOpenChange"
          />
        </n-form-item>

        <n-form-item label="网站关闭提示" path="closeText" v-if="formValue.isShow">
          <n-input
            v-model:value="formValue.closeText"
            type="textarea"
            placeholder="请输入网站关闭提示"
          />
        </n-form-item>
        <n-form-item label="请选择迷你logo" path="smallLogo">
          <BasicUpload
            :data="{ scene: 'setting' }"
            name="file"
            :width="100"
            :height="100"
            :maxSize="2"
            :maxNumber="1"
            @uploadChange="uploadChangeMini"
            v-model:value="smallLogo"
            helpText="单个文件不超过2MB，最多只能上传1个文件"
          />
        </n-form-item>
        <n-form-item label="请选择logo" path="logo">
          <BasicUpload
            :data="{ scene: 'setting' }"
            name="file"
            :width="100"
            :height="100"
            :maxSize="1"
            :maxNumber="1"
            @uploadChange="uploadChange"
            v-model:value="logo"
            helpText="单个文件不超过2MB，最多只能上传1个文件"
          />
        </n-form-item>
        <div>
          <n-space>
            <n-button type="primary" @click="formSubmit">更新基本信息</n-button>
          </n-space>
        </div>
      </n-form>
    </n-grid-item>
  </n-grid>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs } from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
  import { saveSetting, getSetting } from '@/api/system/setting';
  const rules = {
    siteName: {
      required: true,
      message: '请输入网站名称',
      trigger: 'blur',
    },
    logo: {
      required: true,
      message: '请选择一张图片作为logo',
      trigger: 'input',
    },
    smallLogo: {
      required: true,
      message: '请选择一张图片作为迷你logo',
      trigger: 'input',
    },
    closeText: {
      required: true,
      message: '关闭提示不能为空',
    },
  };

  export default defineComponent({
    setup() {
      const formRef: any = ref(null);
      const message = useMessage();
      const dialog = useDialog();
      const smallLogo = ref([]);
      const logo = ref([]);
      const id = ref(1);
      const state = reactive({
        formValue: {
          siteName: '',
          logo: '',
          smallLogo: '',
          closeText:
            '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
          systemOpen: true,
          isShow: false,
        },
      });
      function systemOpenChange(value) {
        if (!value) {
          dialog.warning({
            title: '提示',
            content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
            positiveText: '确定',
            negativeText: '取消',
            onPositiveClick: () => {
              //确定状态
              message.success('操作成功');
              state.formValue.systemOpen = false;
              state.formValue.isShow = true;
            },
            onNegativeClick: () => {
              //取消状态
              state.formValue.systemOpen = true;
            },
          });
        }
        state.formValue.isShow = false;
      }
      // 获取设置
      async function getSettings() {
        const res = await getSetting({ settingName: 'site' });
        state.formValue = res.settings;
        logo.value[0] = res.settings.logo;
        smallLogo.value[0] = res.settings.smallLogo;
      }
      getSettings();
      function formSubmit() {
        formRef.value.validate(async (errors) => {
          if (!errors) {
            try {
              await saveSetting({
                id: id.value,
                settingName: 'site',
                settings: state.formValue, //设置内容,
              });
              message.success('提交成功');
            } catch (error) {
              console.log(111, error);
            }
          } else {
            message.error('验证失败，请填写完整信息');
          }
        });
      }

      function resetForm() {
        formRef.value.restoreValidation();
      }
      function uploadChange(list: string[]) {
        state.formValue.logo = list[0];
      }
      function uploadChangeMini(list: string[]) {
        state.formValue.smallLogo = list[0];
      }
      return {
        formRef,
        ...toRefs(state),
        rules,
        smallLogo,
        logo,
        formSubmit,
        resetForm,
        systemOpenChange,
        uploadChange,
        uploadChangeMini,
      };
    },
  });
</script>
